<template>
  <div>
    <group title="裸眼视力">
      <popup-picker title="右眼裸视" :data="list3" :columns=2 :value.sync="value1" @on-show="onShow" @on-hide="onHide"></popup-picker>
      <popup-picker title="左眼裸视" :data="list3" :columns=2 :value.sync="value2" @on-show="onShow" @on-hide="onHide"></popup-picker>
    </group>
    <group title="矫正视力">
      <popup-picker title="右眼矫视" :data="list3" :columns=2 :value.sync="value3" @on-show="onShow" @on-hide="onHide"></popup-picker>
      <popup-picker title="左眼矫视" :data="list3" :columns=2 :value.sync="value4" @on-show="onShow" @on-hide="onHide"></popup-picker>
    </group>
    <group title="验光数据">
      <popup-picker title="右眼" :data="list2" :value.sync="value5"></popup-picker>
      <popup-picker title="左眼" :data="list2" :value.sync="value6"></popup-picker>
    </group>
</template>

<script>
import { PopupPicker, Group, Picker, XButton, Divider, Flexbox, FlexboxItem } from '../components'

let thirty = []
for (let j = 1; j <= 30; j++) {
  thirty.push(j)
}
let thirty_ = []
for (let j = 1; j <= 30; j++) {
  thirty_.push(j)
}

export default {
  components: {
    PopupPicker,
    Group,
    Picker,
    XButton,
    Divider,
    Flexbox,
    FlexboxItem
  },
  methods: {
    changeList10 () {
      this.list1 = [['小米1', 'iPhone1', '华为1', '情怀1', '三星1', '其他1', '不告诉你1']]
    },
    changeList11 () {
      this.list1[0].push('我是push条目')
    },
    changeList20 () {

    },
    changeList21 () {
      this.list3.push({
        name: '美国002_007',
        value: '0007',
        parent: 'usa002'
      })
    },
    onShow () {
      console.log('on show')
    },
    onHide (type) {
      console.log('on hide', type)
    }
  },
  data () {
    return {
      thirty: [thirty],
      thirty_: [thirty_],
      list1: [['']],
      list2: [
        ['+', '-'],
        thirty,
        ['00', '25', '50', '75'],
        ['+', '-'],
        thirty_,
        ['00', '25', '50', '75']
      ],
      list3: [
        {name: '0.01-0.09', value: 'I', parent: 0}, {name: '0.1-0.9', value: 'II', parent: 0}, {name: '1-2', value: 'III', parent: 0},
        {name: '0.01', value: '0.01', parent: 'I'}, {name: '0.02', value: '0.03', parent: 'I'}, {name: '0.03', value: '0.03', parent: 'I'},
        {name: '0.04', value: '0.04', parent: 'I'}, {name: '0.05', value: '0.05', parent: 'I'}, {name: '0.06', value: '0.06', parent: 'I'},
        {name: '0.07', value: '0.07', parent: 'I'}, {name: '0.08', value: '0.08', parent: 'I'}, {name: '0.09', value: '0.09', parent: 'I'},
        {name: '0.1', value: '0.1', parent: 'II'}, {name: '0.2', value: '0.2', parent: 'II'}, {name: '0.3', value: '0.3', parent: 'II'},
        {name: '0.4', value: '0.4', parent: 'II'}, {name: '0.5', value: '0.5', parent: 'II'}, {name: '0.6', value: '0.6', parent: 'II'},
        {name: '0.7', value: '0.7', parent: 'II'}, {name: '0.8', value: '0.8', parent: 'II'}, {name: '0.9', value: '0.9', parent: 'II'},
        {name: '1.1', value: '1.1', parent: 'III'}, {name: '1.2', value: '1.2', parent: 'III'}, {name: '1.3', value: '1.3', parent: 'III'},
        {name: '1.4', value: '1.4', parent: 'III'}, {name: '1.5', value: '1.5', parent: 'III'}, {name: '1.6', value: '1.6', parent: 'III'},
        {name: '1.7', value: '1.7', parent: 'III'}, {name: '1.8', value: '1.8', parent: 'III'}, {name: '1.9', value: '1.9', parent: 'III'}
      ],
      value1: [],
      value2: [],
      value3: [],
      value4: [],
      value5: [],
      value6: [],
      value7: [],
      value8: [],
      showPopupPicker: false
    }
  }
}
</script>

<style scoped>
.picker-buttons {
  margin: 0 15px;
}
</style>

